{% extends 'main/layout.html' %} {% load static %} {% block title %}{% endblock %}
<link rel="stylesheet" href="{% static 'main/css/main.css' %}" />
{% block content %}
<div class="start_img">
  <img src="{% static 'main/img/background.svg' %}" alt="" />
</div>

<div class="top-gradient">
  <div class="start_info">
    <h1 class="federation-h1">О федерации</h1>
    <div class="about_federation">
      <div class="about_txt">
        <p>
          В современном мире спортивная федерация играет ключевую роль в
          развитии и популяризации различных видов спорта. Наша основная цель —
          предоставить каждому спортсмену возможность раскрыть свой потенциал и
          достичь высот на международной арене. Мы не просто организуем
          соревнования, но и создаем уникальные условия для тренировок и
          подготовки.
        </p>
        <p>
          Федерация активно сотрудничает с ведущими тренерами и спортивными
          специалистами, чтобы внедрять передовые методики и технологии в
          тренировочный процесс. Мы уверены, что качественная подготовка
          спортсменов — залог их успеха на любых соревнованиях.
        </p>
        <p>
          Одним из наших приоритетов является поддержка молодых талантов. Мы
          реализуем программы, направленные на выявление и развитие юных
          спортсменов, обеспечивая их всем необходимым для роста и достижения
          высоких результатов. Совместно с образовательными учреждениями мы
          организуем специальные курсы и семинары, направленные на повышение
          квалификации тренеров и специалистов в области спорта.
        </p>
        <p>
          Наша федерация также активно занимается популяризацией здорового
          образа жизни среди населения. Мы проводим массовые спортивные
          мероприятия, марафоны и акции, привлекая к участию людей всех
          возрастов. Важно отметить, что наши усилия направлены не только на
          развитие профессионального спорта, но и на улучшение здоровья нации в
          целом.
        </p>
      </div>
    </div>
  </div>

  <div class="marquee-container">
    <div class="marquee">
      <span>Федерация спортивного программирования СУРГУТ </span>
      <span>/</span>
      <span>Федерация спортивного программирования СУРГУТ </span>
      <span>/</span>
      <span>Федерация спортивного программирования СУРГУТ </span>
      <span>/</span>
      <span>Федерация спортивного программирования СУРГУТ </span>
      <span>/</span>
      <span>Федерация спортивного программирования СУРГУТ </span>
      <span>/</span>
      <span>Федерация спортивного программирования СУРГУТ </span>
      <span>/</span>
      <span>Федерация спортивного программирования СУРГУТ </span>
    </div>
    <div class="marquee marquee2">
      <span>Федерация спортивного программирования СУРГУТ </span>
      <span>/</span>
      <span>Федерация спортивного программирования СУРГУТ </span>
      <span>/</span>
      <span>Федерация спортивного программирования СУРГУТ </span>
      <span>/</span>
      <span>Федерация спортивного программирования СУРГУТ </span>
      <span>/</span>
      <span>Федерация спортивного программирования СУРГУТ </span>
      <span>/</span>
      <span>Федерация спортивного программирования СУРГУТ </span>
      <span>/</span>
      <span>Федерация спортивного программирования СУРГУТ </span>
    </div>
  </div>

  <div class="competitions">
    <h2 class="h2_competitions">Соревнования</h2>
    <div class="competitions_list">
      <table class="competitions_table">
        <tbody>
          {% for el in competitions%}
          <tr>
            <td>{{ el.title }}</td>
            <td>Количество свободных мест: {{ el.places }}</td>
            <td>{{ el.date }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      <button id="btn-open" class="competition_btn">Участвовать</button>
    </div>

    <div id="competition-modal" class="modal">
      <div class="modal_box">
        <span class="close" id="close-modal">&times;</span>
        <h2 class="modal-h2">ФИО преподавателя</h2>
        <div class="modal-content">
          <div class="form-group">
            <label for="competition">Соревнование</label>
            <select id="competition">
              <option value="python">Основы Python</option>
              <option value="html">Основы Вёрстки</option>
              <option value="csharp">Основы C#</option>
              <option value="cpp">Основы C++</option>
            </select>
          </div>

          <div id="students-container">
            <div class="form-group student-entry">
              <input type="text" placeholder="ФИО студента" />
              <input type="email" placeholder="Эл. почта" />
              <span class="remove-student">&times;</span>
            </div>
          </div>

          <div class="form-group add-student" id="add-student">
            <span>+</span>
            <span style="color: rgba(146, 160, 161, 1)">Добавить ученика</span>
          </div>

          <button id="participate-button">Участвовать</button>
        </div>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener("DOMContentLoaded", function () {
      const slider = document.querySelector(".news-slider");
      const btnLeft = document.querySelector(".scroll-btn.left");
      const btnRight = document.querySelector(".scroll-btn.right");

      btnLeft.addEventListener("click", function () {
        slider.scrollBy({ left: -600, behavior: "smooth" });
      });

      btnRight.addEventListener("click", function () {
        slider.scrollBy({ left: 600, behavior: "smooth" });
      });
    });

    // Открытие модального окна
    document.getElementById("btn-open").addEventListener("click", function () {
      document.getElementById("competition-modal").style.display = "flex";
    });

    // Закрытие модального окна
    document
      .getElementById("close-modal")
      .addEventListener("click", function () {
        closeModal();
      });

    // Закрытие модального окна при нажатии на клавишу "Esc"
    document.addEventListener("keydown", function (event) {
      if (event.key === "Escape") {
        closeModal();
      }
    });

    // Закрытие модального окна при клике вне его
    document.addEventListener("click", function (event) {
      var modal = document.getElementById("competition-modal");
      if (event.target === modal) {
        closeModal();
      }
    });

    function closeModal() {
      document.getElementById("competition-modal").style.display = "none";
      resetForm();
    }

    // Сброс формы
    function resetForm() {
      var container = document.getElementById("students-container");
      container.innerHTML = `
                <div class="form-group student-entry">
                    <input type="text" placeholder="ФИО студента">
                    <input type="email" placeholder="Эл. почта">
                    <span class="remove-student">&times;</span>
                </div>
            `;

      // Переназначить слушатель для удаления студента
      document
        .querySelectorAll(".remove-student")
        .forEach(function (removeButton) {
          removeButton.addEventListener("click", function () {
            container.removeChild(this.parentElement);
          });
        });
    }

    // Добавление нового блока для ввода данных ученика
    document
      .getElementById("add-student")
      .addEventListener("click", function () {
        var container = document.getElementById("students-container");
        var studentEntry = document.createElement("div");
        studentEntry.className = "form-group student-entry";
        studentEntry.innerHTML =
          '<input type="text" placeholder="ФИО студента"><input type="email" placeholder="Эл. почта"><span class="remove-student">&times;</span>';
        container.appendChild(studentEntry);

        // Удаление блока для ввода данных ученика
        studentEntry
          .querySelector(".remove-student")
          .addEventListener("click", function () {
            container.removeChild(studentEntry);
          });
      });

    // Удаление блока для ввода данных ученика
    document
      .querySelectorAll(".remove-student")
      .forEach(function (removeButton) {
        removeButton.addEventListener("click", function () {
          var container = document.getElementById("students-container");
          container.removeChild(this.parentElement);
        });
      });
  </script>

  <div class="federation_news">
    <h2 class="federation_news_h2">Новости федерации</h2>

    <div class="news-slider-wrapper">
      <button class="scroll-btn left">&lt;</button>
      <!-- Стрелка влево -->
      <div class="news-slider">
        {% for el in articles%}
        <div class="news-item">
          <img class="news_img" src="https://vsluh.ru/upload/iblock/b1e/70wq3x79hrijkv450uz3kyoylmmqmiq1.jpg" alt="Новость 1">
          <div class="news-item_txt">
            <h3>{{ el.title }}</h3>
            <p>{{ el.anons }}</p>
            <a href="{% url 'news-detail' el.id %}" class="">Читать далее...</a>
          </div>
        </div>
        {% endfor %}
      </div>
      <button class="scroll-btn right">&gt;</button>
      <!-- Стрелка вправо -->
    </div>
  </div>
  <!--    {% include 'main/test.html' %}-->
  {% endblock %}
</div>
